import React,{Component} from "react";

import "./mvDetail.css"

import { Player,BigPlayButton } from 'video-react';
import { withRouter,Link} from "react-router-dom"

import {getDetailMv,getRelateMv} from "../../api/index"

class MvDetail extends Component {
    constructor(){
        super()
        this.state={
            Mvurl:[],
            AllData:[],
            mvUrl:"",
            relateMv:[],
          
        }
    }
    componentDidMount(){
        getDetailMv(this.props.location.state.id).then(res=>{
            // console.log(res.data.data)
            this.setState({
                AllData:res.data.data,
                mvUrl:res.data.data.brs["1080"]?res.data.data.brs["1080"]:res.data.data.brs["240"]
            })
        })

        getRelateMv(this.props.location.state.id).then(res=>{
            // console.log(res)
            this.setState({
                relateMv:res.data.data,
                
            })
        })
    }

    goback(){
        this.props.history.go(-1)
    }
    render(){
        // console.log(this.props.location.state.id)
        let{AllData,mvUrl,relateMv}=this.state;
        // console.log(mvUrl)
        return(
            <div className="mvdetail">
                  <div className="mvWrap">
                    <Player
                    playsInline
                    poster={AllData.cover}
                    src={mvUrl}
                    >  
                    <BigPlayButton position="center" />
                    </Player>
                    <span className="iconfont back" onClick={this.goback.bind(this)}>&#xe749;</span>
                  </div>
                  <div className="SomeInfo">
                      <h2>Deutschland</h2>
                      <i>{AllData.playCount}次观看</i>
                      <div className="btnAll">
                         <div className="first">
                                <span className="iconfont zan">&#xe62b;</span>
                                <i>{AllData.likeCount}</i>
                         </div>
                         <div className="second">
                                <span className="iconfont shoucang">&#xe66a;</span>
                                <i>{AllData.subCount}</i>
                         </div>
                         <div className="third">
                                <span className="iconfont pinglun">&#xe610;</span>
                                <i>{AllData.commentCount}</i>
                         </div>
                         <div className="fouth">
                                <span className="iconfont fenxiang">&#xe621;</span>
                                <i>{AllData.shareCount}</i>
                         </div>
                     </div>
                     <div className="authorInfo">
                         <div className="authorLeft">
                             <div className="imgWrap">
                                 <img  src={AllData.cover}/>
                             </div>
                             <span>{AllData.artistName}</span>
                         </div>
                         <div className="authorRight">
                            
                         </div>
                     </div>
                     <div className="relateRecommond">
                        <h2>相关推荐</h2>
                        <div className="relateMv">
                        {relateMv.map(item=>{
                            //  console.log(item.vid)
                                 return(
                                    
                                    <Link to={{pathname:"/mvDetail",state:{id:item.vid}}} className="relateWrap" key={item.vid}>
                                    <div className="relateImgWrap">
                                           <img src={item.coverUrl}/>
                                    </div>
                                    <div className="relateInfo">
                                        <h4>{item.title}</h4>
                                        <div className="smallInfo">
                                           <span>03:46，</span>
                                           <i>{item.creator[0].userName}</i>
                                        </div>
                                    </div>
                                </Link>
                                 )
                        })}
                        </div>
                      
                        
                     </div>
                  </div>
                  
            </div>
        )
    }
}

export default withRouter(MvDetail)